<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import {
  fetchCourse,
  addcoutse,
  deletecoutse,
  updatecoutse,
} from "@/api/course";

const searchInput = ref("");
const carousels = ref([]);
const imageUrl = ref("");

const handleAvatarSuccess = (response, uploadFile) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw);
  currentRow.data.src = "http://127.0.0.1:8082" + response.data.url;
};

const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== "image/jpeg") {
    ElMessage.error("Avatar picture must be JPG format!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("Avatar picture size can not exceed 2MB!");
    return false;
  }
  return true;
};

const init = () => {
  fetchCourse().then((res) => {
    console.log(res.data.data);

    carousels.value = res.data.data;
  });
};
const Fetchdeletecoutse = async (id) => {
  await deletecoutse(id).then((res) => {
    console.log(res.data.data);
    ElMessage.success("删除课程成功");
  });

  init();
};

const addDialogFormVisible = ref(false);
const currentRow = reactive({
  data: {},
  dialogFormVisible: false,
  flag: false,
});

const handleUpdate = async () => {
  if (!currentRow.flag) {
    console.log("新增用户");
    await addcoutse(currentRow.data).then((res) => {
      console.log(res.data.data);
    });

    init();

    ElMessage.success("新增课程成功");
  } else {
    await updatecoutse(currentRow.data).then((res) => {
      console.log(res.data.data);
    });

    init();
    ElMessage.success("更新课程成功");
  }
};
onMounted(() => {
  init();
});
</script>
<template>
  <div>
    <div>
      <div class="flex flex-between">
        <div>
          <el-input v-model="searchInput" placeholder="标题过滤...">
            <template #prepend>标题</template>
          </el-input>
        </div>
        <div>
          <el-button
            type="primary"
            @click="
              (currentRow.data = {}),
                (currentRow.dialogFormVisible = true),
                (currentRow.flag = false),
                (selectRow = false)
            "
            >新建<el-icon><Plus /></el-icon>
          </el-button>
        </div>
      </div>
      <el-dialog
        :title="currentRow.flag ? '修改信息' : '新增信息'"
        v-model="currentRow.dialogFormVisible"
      >
        <el-form :model="currentRow.data" status-icon :rules="rules">
          <el-form-item label="标题">
            <el-input
              v-model="currentRow.data.title"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input
              v-model="currentRow.data.desc1"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="封面">
            <el-upload
              class="avatar-uploader"
              action="http://127.0.0.1:8082/api/upload/image"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="currentRow.data.src"
                :src="currentRow.data.src"
                class="avatar"
                width="200px"
              />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="currentRow.dialogFormVisible = false"
            >取 消</el-button
          >
          <el-button
            type="primary"
            @click.native="
              (currentRow.dialogFormVisible = false), handleUpdate()
            "
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <el-table
        :data="carousels.filter((item) => item.title.includes(searchInput))"
        style="width: 100%"
        highlight-current-row
      >
        <el-table-column type="index" label="序号" width="150" align="center" />
        <el-table-column label="标题" prop="title" />
        <el-table-column label="封面" prop="src">
          <template #default="scope">
            <img :src="scope.row.src" alt="" width="100%" />
          </template>
        </el-table-column>
        <el-table-column label="描述" prop="desc1" />

        <el-table-column align="right">
          <template #header>
            <p>编辑</p>
          </template>
          <template #default="scope">
            <el-button
              size="small"
              @click="
                (currentRow.data = { ...scope.row }),
                  (currentRow.dialogFormVisible = true),
                  (currentRow.flag = true),
                  console.log(scope.row)
              "
            >
              Edit
            </el-button>
            <el-button
              size="small"
              type="danger"
              @click="Fetchdeletecoutse(scope.row.id)"
            >
              Delete
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style scoped></style>
